/*
 * 新增物资
 * @Author: ljb
 * @Date: 2018-07-12 10:00:08
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-06 17:57:34
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-admin-material-create {
		min-height: 600px;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .material-form {
            width: 380px;
		}
		.ivu-radio-group {
            margin: 0 0 20px 4.16666667%;
        }
        .btn {
            margin-top: 15px;
        }
    }
</style>
<template>
	<div class="v-admin-material-create">

		<RadioGroup v-model="add_type">
			<Radio :label="$t('supplies_management.new')"/>
			<Radio :label="$t('supplies_management.old')"/>
		</RadioGroup>

		<Row
			type="flex"
			justify="start">
			<i-col>
				<Form
					v-show="add_type === $t('supplies_management.new')"
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(120,170)"
					name="create-form-new"
					class="material-form">

					<Form-item
						:label="$t('supplies_management.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.name')})"
							name="create-new-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.code')"
						prop="code">
						<i-input
							v-model="formValidate.code"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.code')})"
							name="create-new-code"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.specification')"
						prop="specifications">
						<i-input
							v-model="formValidate.specifications"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.specification')})"
							name="create-new-specifications"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.producer')"
						prop="manufacturer">
						<i-input
							v-model="formValidate.manufacturer"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.producer')})"
							name="create-new-manufacturer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buy_num')"
						prop="sku">
						<InputNumber
							:min="1"
							:max="100000000"
							v-model="formValidate.sku"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buy_num')})"
							name="create-new-sku"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buyer')"
						prop="buyer">
						<i-input
							v-model="formValidate.buyer"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buyer')})"
							name="create-new-buyer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buy_date')"
						prop="purchase_at">
						<DatePicker
							v-model="formValidate.purchase_at"
							:style="{width : '260px'}"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buy_date')})"
							name="create-new-purchase_at"
							type="date"
							placement="top"
							@on-change="changeDate"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.remark')"
						prop="remark">
						<i-input
							v-model="formValidate.remark"
							:autosize="{minRows: 2,maxRows: 5}"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.remark')})"
							name="create-new-remark"
							type="textarea"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
				<Form
					v-show="add_type === $t('supplies_management.old')"
					ref="oldFormValidate"
					:model="oldFormValidate"
					:rules="oldRuleValidate"
					:label-width="labelWidth(120,170)"
					name="create-form-old"
					class="material-form">

					<Form-item
						:label="$t('supplies_management.old_material')"
						prop="material_id">
						<Select
							v-model="oldFormValidate.material_id"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.old_material')})"
							name="create-old-material_id"
							clearable
							filterable>
							<Option
								v-for="material in materials"
								:value="String(material.id)"
								:key="material.id"
								:label="material.name"/>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buy_num')"
						prop="sku">
						<InputNumber
							:min="1"
							:max="100000000"
							v-model="oldFormValidate.sku"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buy_num')})"
							name="create-old-buy_num"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buyer')"
						prop="buyer">
						<i-input
							v-model="oldFormValidate.buyer"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buyer')})"
							name="create-old-buyer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.buy_date')"
						prop="purchase_at">
						<DatePicker
							v-model="oldFormValidate.purchase_at"
							:style="{width: '260px'}"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.buy_date')})"
							name="create-old-purchase_at"
							type="date"
							placement="bottom"
							@on-change="changeDate"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.remark')"
						prop="remark">
						<i-input
							v-model="oldFormValidate.remark"
							:autosize="{minRows: 2,maxRows: 5}"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.remark')})"
							name="create-old-remark"
							type="textarea"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('oldFormValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('oldFormValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'SuppliesCreate',
	mixins: [labelWidthMixin],
	props: {
		materials: {
			type: Array,
			default() {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {
			add_type: '',	// 新增物资的方式

			formValidate: {
				name: '',	// 物资名称

				code: '', // 物资编号

				specifications: '', // 规格

				manufacturer: '',	// 生产商

				sku: 1,	// 采购数量

				buyer: '',	// 采购人

				purchase_at: '', // 采购日期

				remark: '',	// 备注
			}, // 新建物资时的表单

			oldFormValidate: {
				material_id: '', // 已有物资id

				sku: 1,	// 采购数量

				buyer: '',		// 采购人

				purchase_at: '',	// 采购日期

				remark: '',			// 备注
			}, // 从已有物资里增加物资时的表单

			real_date: '',	// 用于存储时间组件改变后的值

			ruleValidate: { // 新增表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.name') }),
						trigger: 'blur,change',
					},
				],
				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.code') }),
						trigger: 'blur,change',
					},
				],
				sku: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('supplies_management.buy_num') }),
						trigger: 'blur,change',
					},
				],
				specifications: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.specification') }),
						trigger: 'blur,change',
					},
				],
				manufacturer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.producer') }),
						trigger: 'blur,change',
					},
				],
				buyer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.buyer') }),
						trigger: 'blur,change',
					},
				],
				purchase_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('supplies_management.buy_date') }),
						trigger: 'blur,change',
					},
				],
				remark: [],
			},

			oldRuleValidate: { // 已有物资验证规则
				material_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.old_material') }),
						trigger: 'blur,change',
					},
				],
				sku: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('supplies_management.buy_num') }),
						trigger: 'blur,change',
					},
				],
				buyer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.buyer') }),
						trigger: 'blur,change',
					},
				],
				purchase_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('supplies_management.buy_date') }),
						trigger: 'blur,change',
					},
				],
				remark: [],
			},

		};
	},
	watch: {
		add_type() {
			switch (this.add_type) {
			case this.$t('supplies_management.new'):

				this.handleReset('oldFormValidate');

				break;

			default:

				this.handleReset('formValidate');
				break;
			}
		},
	},
	mounted() {
		this.add_type = this.$t('supplies_management.new');
	},
	methods: {
		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeDate(date) {
			this.real_date = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.handleData();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接表单数据
         * @return {undefined}
         */
		handleData() {
			switch (this.add_type) {
			case this.$t('supplies_management.old'): {
				const new_object = {
					material_id: this.oldFormValidate.material_id || '',

					sku: this.oldFormValidate.sku || 1,

					buyer: this.oldFormValidate.buyer,

					purchase_at: this.real_date,

					remark: this.oldFormValidate.remark || '',
				};

				this.$emit('add', new_object);

				break;
			}

			default: {
				const new_object = {
					name: this.formValidate.name || 0,

					code: this.formValidate.code || 0,

					manufacturer: this.formValidate.manufacturer || 0,

					specifications: this.formValidate.specifications || 0,

					sku: this.formValidate.sku || 0,

					buyer: this.formValidate.buyer,

					purchase_at: this.real_date,

					remark: this.formValidate.remark || '',
				};

				this.$emit('post', new_object);

				break;
			}
			}
		},

	},


};
</script>
